<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <link rel="stylesheet" href="/mobile/css/app.css">
    <title>Login</title>
</head>

<body class="mdui-container-fluid mdui-theme-primary-teal">
    <div class="mdui-center mdui-m-t-5" style="width: 440px; height: 300px;">
        <div class="mdui-row">
            <div class="mdui-col-xs-12 mdui-center mdui-text-center">
                <h2>Login</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-12">
                <div class="mdui-textfield">
                    <input class="mdui-textfield-input" name="phone" id="phone" type="text" placeholder="请输入手机号" />
                </div>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-8">
                <div class="mdui-textfield">
                    <input class="mdui-textfield-input" name="sms_code" id="sms_code" type="text"
                        placeholder="请输入手机验证码" />
                </div>
            </div>
            <div class="mdui-col-xs-4">
                <div class="mdui-textfield">
                    <button type="button" class="mdui-btn-block" onclick="getSmsCode()">获取验证码</button>
                </div>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-12">
                <div class="mdui-textfield">
                    <button type="button" class="mdui-btn mdui-color-theme-accent mdui-ripple">登&nbsp;&nbsp;录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="mdui-row mdui-text-center mdui-m-t-2 mdui-m-b-5 footer">
        <div class="mdui-col-xs-12 mdui-m-b-5" class="mdui-text-color-theme">
            <a href="#" class="mdui-text-color-theme">欢生活服务</a>
            <p>Copyright © 2020 HuanLifeServer.Group</p>
        </div>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+" crossorigin="anonymous">
    </script>
    <script>
        var $ = mdui.$;

        function getSmsCode() {

            var phone = $("#phone").val()
            if (phone.lenght <= 11) {
                mdui.alert('手机号码不正确！');
                return false;
            }

            mdui.$.ajax({
                method: 'GET',
                url: '/get_sms_code',
                dataType: 'json',
                data: {
                    phone: phone
                },
                success: function(data) {
                    console.log(data);
                    if (data.state == true) {
                        return true;
                    } else {
                        mdui.alert(data.message);
                        return false;
                    }
                }
            });
        }

    </script>
</body>

</html>
